<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>客户表</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="customer">
      <el-container style="height:100%;">
        <el-aside class="companyMaterialUpdate" width="35%">
          <customer-form type="update" :customer-type="2" :customer="updateCustomer" @save-success="updateCustomerAfter"></customer-form>
        </el-aside>
        <el-main class="companyMaterialQuery" width="65%">
          <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
            <template slot="append">
              <el-button type="primary" size="medium" @click="showCustomerAddForm">新增客户</el-button>
            </template>
            <div slot="search-content">
              <search-form ref="searchForm" :search="search" :type="2"></search-form>
            </div>
          </search-btn-view>
          <div class="customerDiv">
            <el-table stripe fit border :data="customerList" style="width: 100%" height="parent" @row-click="getCustomerDetail">
              <el-table-column prop="customerCode" label="客户代码" min-width="120px" header-align="center"></el-table-column>
              <el-table-column prop="customerName" label="客户名称" min-width="150px" header-align="center"></el-table-column>
              <el-table-column prop="contact" label="联系人" min-width="100px" header-align="center"></el-table-column>
              <el-table-column :resizable="false" label="结算付款方式" min-width="120px" align="center">
                <template slot-scope="props">
                  {{i18n.getMsg(`customer.paymentWayType.${props.row.paymentWay}`)}}
                </template>
              </el-table-column>
              <el-table-column prop="phone" label="联系电话" min-width="130px" header-align="center"></el-table-column>
              <el-table-column prop="email" label="邮箱地址" min-width="220px" header-align="center">
                <template slot-scope="scope">
                  <div v-for="str in scope.row.email" :key="str">{{str}}</div>
                </template>
              </el-table-column>
              <el-table-column :resizable="false" prop="status" label="状态" min-width="80px" align="center"></el-table-column>
            </el-table>
          </div>
          <div style="margin-top:10px;text-align:right;" v-if="pagination.totalCount!==0">
            <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
              @current-change="pageChange">
            </el-pagination>
          </div>
        </el-main>
      </el-container>

      <el-dialog title="添加客户" :close-on-press-escape="false" :close-on-click-modal="false" :visible.sync="isShowCustomerAddForm" top="5vh">
        <div style="height:calc(80vh - 54px);overflow:auto">
          <customer-form v-if="isShowCustomerAddForm" :customer-type="2" @save-success="addCustomerAfter">
          </customer-form>
        </div>
      </el-dialog>
    </div>
  </div>
</body>

<script src="../../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/js/checkVaildUtil.js",
    "/vueSystem/js/storageUtil.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/filterSelect.js"
  ]);

</script>
<script src="../../models/customerModel.js"></script>
<script src="../customerForm.js"></script>
<script src="../searchForm.js"></script>
<script src="../customerMixin.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    mixins: [CustomerMixin(2)],
    data: function () {
      return {
        i18n: i18n
      };
    }
  });

</script>
<style>
  .customer {
    height: calc(100% - 20px);
    overflow: auto;
    padding: 10px 20px;
  }

  .customer .companyMaterialQuery {
    padding-right: 0;
    padding-bottom: 0;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
  }

  .customer .customerDiv {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
